<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>WealthApp</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" href="../css/mui.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/main.css" />
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  </head>

  <body>
    <header class="mui-bar mui-bar-nav">
      <h1 class="mui-title">首页</h1>
    </header>
    <nav class="mui-bar mui-bar-tab">
      <a class="mui-tab-item mui-active" href="#tabbar">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
      </a>
      <a class="mui-tab-item" href="#tabbar-with-wealth" id="nav-wealth">
        <i class="fa fa-line-chart my-icon" aria-hidden="true"></i>
        <span class="mui-tab-label my-icon-txt">财富</span>
      </a>
      <a class="mui-tab-item" href="#tabbar-with-share">
        <i class="fa fa-share-alt my-icon" aria-hidden="true"></i>
        <span class="mui-tab-label my-icon-txt">分享</span>
      </a>
      <a class="mui-tab-item" href="#tabbar-with-mine">
        <span class="mui-icon mui-icon-contact"></span>
        <span class="mui-tab-label">我的</span>
      </a>
    </nav>
    <div class="mui-content">
      <div id="tabbar" class="mui-control-content mui-active">
        <div class="mui-scroll-wrapper">
          <div class="mui-scroll">
            <!--这里放置真实显示的DOM内容-->
            <!-- 轮播图 -->
            <div id="slider" class="mui-slider">
              <div class="mui-slider-group mui-slider-loop">
                <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
                <div class="mui-slider-item mui-slider-item-duplicate">
                  <a href="#">
                    <img src="../images/banner-3.png">
                  </a>
                </div>
                <!-- 第一张 -->
                <div class="mui-slider-item">
                  <a href="#">
                    <img src="../images/banner-1.png">
                  </a>
                </div>
                <!-- 第二张 -->
                <div class="mui-slider-item">
                  <a href="#">
                    <img src="../images/banner-2.png">
                  </a>
                </div>
                <!-- 第三张 -->
                <div class="mui-slider-item">
                  <a href="#">
                    <img src="../images/banner-3.png">
                  </a>
                </div>
                <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
                <div class="mui-slider-item mui-slider-item-duplicate">
                  <a href="#">
                    <img src="../images/banner-1.png">
                  </a>
                </div>
              </div>
              <div class="mui-slider-indicator">
                <div class="mui-indicator mui-active"></div>
                <div class="mui-indicator"></div>
                <div class="mui-indicator"></div>
              </div>
            </div>
            <!-- 导航 -->
            <ul class="mui-table-view mui-grid-view mui-grid-9 my-nav">
              <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                <a href="#" id="personal">
                  <img src="../images/personal-2.png" alt="" width="30" height="30">
                  <div class="mui-media-body">个人信息</div>
                </a>
              </li>
              <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                <a href="#" id="wallet">
                  <img src="../images/wallet-2.png" alt="" width="30" height="30">
                  <div class="mui-media-body">钱包明细</div>
                </a>
              </li>
              <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                <a href="#" id="order">
                  <img src="../images/order-2.png" alt="" width="30" height="30">
                  <div class="mui-media-body">投资订单</div>
                </a>
              </li>
            </ul>
            <!-- 签到 -->
            <ul class="mui-table-view my-mui-table-view my-sign">
              <li class="mui-table-view-cell mui-media my-mui-media">
                <!-- <a href="javascript:;"> -->
                <img class="mui-media-object mui-pull-left" src="../images/sign-in.png">
                <div class="mui-media-body">
                  签到
                  <p class="mui-ellipsis">点击签到, 赚积分!</p>
                </div>
                <button type="button" class="mui-btn mui-btn-danger my-btn">签到</button>
                <!-- </a> -->
              </li>
            </ul>
            <!-- 公告列表 -->
            <div class="notice-list">公告列表</div>
            <ul class="mui-table-view my-mui-table-view my-notice">
              <li class="mui-table-view-cell">
                <img class="mui-pull-left" src="../images/notice.png" height="21">
                <a class="mui-navigate-right">
                  Item 1
                </a>
              </li>
              <li class="mui-table-view-cell">
                <img class="mui-pull-left" src="../images/notice.png" height="21">
                <a class="mui-navigate-right">
                  Item 2
                </a>
              </li>
              <li class="mui-table-view-cell">
                <img class="mui-pull-left" src="../images/notice.png" height="21">
                <a class="mui-navigate-right">
                  Item 3
                </a>
              </li>
              <li class="mui-table-view-cell">
                <img class="mui-pull-left" src="../images/notice.png" height="21">
                <a class="mui-navigate-right">
                  Item 1
                </a>
              </li>
              <li class="mui-table-view-cell">
                <img class="mui-pull-left" src="../images/notice.png" height="21">
                <a class="mui-navigate-right">
                  Item 2
                </a>
              </li>
              <li class="mui-table-view-cell">
                <img class="mui-pull-left" src="../images/notice.png" height="21">
                <a class="mui-navigate-right">
                  Item 3
                </a>
              </li>
              <li class="mui-table-view-cell">
                <img class="mui-pull-left" src="../images/notice.png" height="21">
                <a class="mui-navigate-right">
                  Item 1
                </a>
              </li>
              <li class="mui-table-view-cell">
                <img class="mui-pull-left" src="../images/notice.png" height="21">
                <a class="mui-navigate-right">
                  Item 2
                </a>
              </li>
              <li class="mui-table-view-cell">
                <img class="mui-pull-left" src="../images/notice.png" height="21">
                <a class="mui-navigate-right">
                  Item 3
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div id="tabbar-with-wealth" class="mui-control-content" style="height: 100%;">
        <div class="mui-scroll-wrapper">
          <div class="mui-scroll">
            <!--这里放置真实显示的DOM内容-->
            <div class="top">
              <img src="../images/banner-2.png" alt="">
            </div>
            <ul class="mui-table-view mui-grid-view mui-grid-9">
              <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                <a href="#" id="personal">
                  <img src="../images/youzhi-3.png" alt="" width="30" height="30">
                  <div class="mui-media-body">严选优质资产</div>
                </a>
              </li>
              <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                <a href="#" id="wallet">
                  <img src="../images/fangzi.png" alt="" width="30" height="30">
                  <div class="mui-media-body">账户安全保障</div>
                </a>
              </li>
              <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                <a href="#" id="order">
                  <img src="../images/anquan.png" alt="" width="30" height="30">
                  <div class="mui-media-body">历史100%兑付</div>
                </a>
              </li>
            </ul>
            <div class="tz">
              <!-- <div class="mui-input-row"> -->
              <div class="tz-title">投资金额</div>
              <div class="mui-input-row mui-radio mui-left">
                <label>10</label>
                <input name="radio" type="radio" checked>
              </div>
              <div class="mui-input-row mui-radio mui-left">
                <label>20</label>
                <input name="radio" type="radio">
              </div>
              <div class="mui-input-row mui-radio mui-left">
                <label>30</label>
                <input name="radio" type="radio">
              </div>
              <div class="mui-input-row mui-radio mui-left">
                <label>50</label>
                <input name="radio" type="radio">
              </div>
              <div class="mui-input-row mui-radio mui-left">
                <label>100</label>
                <input name="radio" type="radio">
              </div>
              <!-- </div> -->
              <button type="button" class="mui-btn mui-btn-red mui-btn-block my-btn">确定</button>
            </div>
            <div class="lc-title">投资介绍</div>
            <div class="lc-content">
              <img src="../images/touzi.png" alt="">
              <p>投资，指国家或企业以及个人，为了特定目的，与对方签订协议，促进社会发展，实现互惠互利，输送资金的过程。又是特定经济主体为了在未来可预见的时期内获得收益或是资金增值，在一定时期内向一定领域投放足够数额的资金或实物的货币等价物的经济行为。可分为实物投资、资本投资和证券投资等。前者是以货币投入企业，通过生产经营活动取得一定利润，后者是以货币购买企业发行的股票和公司债券，间接参与企业的利润分配。</p>
            </div>
          </div>
        </div>
      </div>
      <div id="tabbar-with-share" class="mui-control-content">
        <div class="share-title">我的分享</div>
        <img class="share-img" src="../images/share.jpeg" alt="">
      </div>
      <div id="tabbar-with-mine" class="mui-control-content" style="height: 100%;">
        <div class="mui-scroll-wrapper">
          <div class="mui-scroll">
            <!--这里放置真实显示的DOM内容-->
            <div class="mine">
              <div class="logo">
                <img src="../images/logo.png" alt="">
              </div>
              <ul class="mui-table-view mui-grid-view mui-grid-9 my-top">
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                  <a href="#" id="personal">
                    <div class="mui-media-body">钱包金额</div>
                    <div>999.00</div>
                  </a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                  <a href="#" id="wallet">
                    <div class="mui-media-body">直推数量</div>
                    <div>230</div>
                  </a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                  <a href="#" id="order">
                    <div class="mui-media-body">累计奖励</div>
                    <div>100.00</div>
                  </a>
                </li>
              </ul>
              <ul class="mui-table-view my-mine">
                <li class="mui-table-view-cell">
                  <a class="mui-navigate-right" id="personal">
                    <img src="../images/xingming-2.png" alt="">
                    <span>个人信息</span>
                  </a>
                </li>
                <li class="mui-table-view-cell">
                  <a class="mui-navigate-right" id="wallet">
                    <img src="../images/wallet-2.png" alt="">
                    <span>钱包明细</span>
                  </a>
                </li>
                <li class="mui-table-view-cell">
                  <a class="mui-navigate-right" id="order">
                    <img src="../images/order-2.png" alt="">
                    <span>投资订单</span>
                  </a>
                </li>
                <li class="mui-table-view-cell">
                  <a class="mui-navigate-right" id="reflect">
                    <img src="../images/tixian.png" alt="">
                    <span>我要提现</span>
                  </a>
                </li>
                <li class="mui-table-view-cell">
                  <a class="mui-navigate-right" id="push">
                    <img src="../images/tuijianren.png" alt="">
                    <span>我的直推</span>
                  </a>
                </li>
                <li class="mui-table-view-cell">
                  <a class="mui-navigate-right" id="team">
                    <img src="../images/tuandui.png" alt="">
                    <span>我的团队</span>
                  </a>
                </li>
                <li class="mui-table-view-cell">
                  <a class="mui-navigate-right" id="changePassword">
                    <img src="../images/xiugaimima.png" alt="">
                    <span>修改密码</span>
                  </a>
                </li>
              </ul>
              <button type="button" class="my-btn mui-btn mui-btn-danger mui-btn-block mui-btn-outlined">退出登录</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="../js/mui.min.js"></script>
  <script src="../js/jquery-2.1.0.js"></script>
  <script>
    let index = sessionStorage.getItem('active')
    if(index){
      let content = $('.mui-content>div')
      let nav = $('.mui-bar-tab>a')
      content.removeClass('mui-active')
      nav.removeClass('mui-active')
      content.eq(index).addClass('mui-active')
      nav.eq(index).addClass('mui-active')
    }
    
    mui('.mui-scroll-wrapper').scroll({
      deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    }) // 滚动区域
    mui('#slider').slider({
      interval: 2000
    })
    // 导航事件
    mui('.mui-bar-tab').on('tap', 'a', function() {
      let title = $(this).children('.mui-tab-label').html()
      $('.mui-title').html(title)
      let index = $(this).index()
      sessionStorage.setItem('active', index)
    })
    mui('.my-notice').on('tap', 'li', function() {
      mui.openWindow('notice.html', 'notice', {})
    })
    mui('.my-nav').on('tap', 'a', function() {
      let id = $(this).attr('id')
      let obj = {
        personal: 'personal.html',
        wallet: 'wallet.html',
        order: 'order.html',
      }
      mui.openWindow(obj[id], id)
    })
    mui('.my-mui-table-view').on('tap', '.my-btn', function() {
      mui.toast('签到成功！')
    })

    // 我的页面
    mui('.my-mine').on('tap', 'a', function() {
      let id = $(this).attr('id')
      let obj = {
        personal: 'personal.html',
        wallet: 'wallet.html',
        order: 'order.html',
        reflect: 'reflect.html',
        push: 'push.html',
        team: 'team.html',
        changePassword: 'changePassword.html'
      }
      mui.openWindow( obj[id], id)
    })
    let nav = mui('.mui-bar-tab a')
    let wealth = document.getElementById('nav-wealth')
    
    
  </script>

</html>
